<template>
	<div>
		<h1>公告管理</h1>
		<hr><br>
		<!-- 搜索 -->
		<div>
			<el-input v-model="noticeQueryParam.noticeTitle" placeholder="标题" style="width: 200px;"></el-input>
			<!-- <el-input v-model="noticeQueryParam.noticeContent" placeholder="正文" style="width: 200px;"></el-input> -->
			<el-date-picker v-model="noticeQueryParam.releaseDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="发布日期">
			</el-date-picker>
			<el-input v-model="noticeQueryParam.publisher" placeholder="发布人" style="width: 200px;"></el-input>
			<el-date-picker v-model="noticeQueryParam.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="展示开始时间">
			</el-date-picker>
			<el-input v-model="noticeQueryParam.keyWord" placeholder="关键字" style="width: 200px;"></el-input>
		</div>
		<!-- 操作 -->
		<div>
			<el-button size="mini" type="primary" round @click="loadData()">搜索</el-button>
			<el-button size="mini" type="primary" round @click="loadData()">展示全部</el-button>
			<el-button size="mini" type="danger" @click="delSelects" :disabled="id.ids.length <= 0">删除选中</el-button>
			<el-button size="mini" type="primary" round @click="dialogVisible = true">添加信息</el-button>
		</div>
		<!-- 表格数据 -->
		<div>
			<el-table :data="noticeInfo" border style="width: 100%" @selection-change="selects">
				<el-table-column type="selection" width="55">
				</el-table-column>
			    <el-table-column prop="noticeTitle" label="标题" width="180">
			    </el-table-column>
			    <el-table-column prop="noticeContent" label="正文" width="180">
			    </el-table-column>
			    <el-table-column prop="releaseDate" label="发布日期" width="180">
			    </el-table-column>
			    <el-table-column prop="publisher" label="发布人" width="180">
			    </el-table-column>
				<el-table-column prop="browseTimes" label="浏览次数" width="180">
				</el-table-column>
			    <el-table-column prop="startTime" label="展示开始时间" width="180">
			    </el-table-column>
			    <el-table-column prop="endTime" label="展示结束时间" width="180">
			    </el-table-column>
				<el-table-column label="操作" width="280">
					<template slot-scope="rowData">
						<el-button size="mini" type="danger" @click="delRow(rowData)">删除</el-button>
						<el-button size="mini"  type="primary" :disabled="rowData.row.isDisplay == 1" @click="up(rowData)" round>展示</el-button>
						<el-button size="mini" type="danger" :disabled="rowData.row.isDisplay == 0" @click="down(rowData)">隐藏</el-button>
						<el-button size="mini"  type="primary" @click="update(rowData)" round>修改</el-button>
					</template>
				</el-table-column>
				<!-- 分页 -->
			</el-table>
			  <el-pagination  layout="prev, pager, next" :current-page="noticeQueryParam.indexPage" :page-size="noticeQueryParam.pageSize" @current-change="pageLoad" :total="total"></el-pagination>
		</div>
		<!-- 将要弹出的添加信息框 -->
		<div>
			<el-dialog title="公告信息添加" :visible.sync="dialogVisible" width="30%" @close="cleanAddNoticeInfo">
				<el-form label-width="100px">
				  <el-form-item label="标题">
				    <el-input v-model="addNoticeParam.noticeTitle" placeholder="请输入标题"></el-input>
				  </el-form-item>
				  <el-form-item label="正文">
				    <el-input type="textarea" placeholder="请输入正文" v-model="addNoticeParam.noticeContent"></el-input>
				  </el-form-item>
				  <el-form-item label="展示开始时间">
				    <el-date-picker v-model="addNoticeParam.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
				    </el-date-picker>
				  </el-form-item>
				  <el-form-item label="展示结束时间">
				    <el-date-picker v-model="addNoticeParam.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
				    </el-date-picker>
				  </el-form-item>
				</el-form>
			    <div slot="footer" class="dialog-footer">
			        <el-button @click="dialogVisible = false">取 消</el-button>
			        <el-button type="primary" @click="saveNewNoticeInfo">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<!-- 将要弹出的修改信息框 -->
		<div>
			<el-dialog title="公告信息添加" :visible.sync="dialogIsVisible" width="30%" @close="cleanUpdateNoticeInfo">
				<el-form label-width="100px">
				  <el-form-item label="标题">
				    <el-input v-model="updateNoticeParam.noticeTitle" placeholder="请输入标题"></el-input>
				  </el-form-item>
				  <el-form-item label="正文">
				    <el-input type="textarea" placeholder="请输入正文" v-model="updateNoticeParam.noticeContent"></el-input>
				  </el-form-item>
				  <el-form-item label="发布日期">
				    <el-date-picker v-model="updateNoticeParam.releaseDate" :disabled="true" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
				    </el-date-picker>
				  </el-form-item>
				  <el-form-item label="发布人">
				    <el-input v-model="updateNoticeParam.publisher" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="浏览次数">
				    <el-input v-model="updateNoticeParam.browseTimes" :disabled="true"></el-input>
				  </el-form-item>
				  <el-form-item label="展示开始时间">
				    <el-date-picker v-model="updateNoticeParam.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
				    </el-date-picker>
				  </el-form-item>
				  <el-form-item label="展示结束时间">
				    <el-date-picker v-model="updateNoticeParam.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
				    </el-date-picker>
				  </el-form-item>
				</el-form>
			    <div slot="footer" class="dialog-footer">
			        <el-button @click="dialogIsVisible = false">取 消</el-button>
			        <el-button type="primary" @click="updateNoticeInfo">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<div class="back">
			<div class="">
				<div class=""></div>
				<div class="">
				</div>
			</div>
		</div>
		<div class="">
			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//表格公告
				noticeInfo: [],
				// 查询参数
				noticeQueryParam: {
					//标题
					 noticeTitle: null,
					//正文
					noticeContent: null,
					//发布日期
					releaseDate: null,
					//发布人
					publisher: null,
					//浏览次数
					browseTimes: null,
					//删除0不删1删
					deleted: null,
					//展示开始时间
					startTime: null,
					//展示结束时间
					endTime: null,
					//是否展示0展示默认1不展示
					isDisplay: null,
					//关键字
					keyWord: null,
					//分页参数
					indexPage: 1,
					pageSize: 3
				},
				//添加
				addNoticeParam: {},
				//修改
				updateNoticeParam: {},
				// 总条目数
				total: -1,
				// 展示添加框
				dialogVisible: false,
				// 展示修改框
				dialogIsVisible: false,
				//选中ID
				id: {
					ids: []
				}
			}
		},
		methods:{
			//查询并展示
			loadData() {
				this.$http.post("/notice/findAll",this.noticeQueryParam)
				.then((resp) => {
					this.noticeInfo = resp.data.data.data;
					this.total =resp.data.data.total;
				});
				this.noticeQueryParam = {
					indexPage: 1,
					pageSize: 3
				}
			},
			//翻页
			pageLoad(index) {
				this.noticeQueryParam.indexPage = index;
				this.loadData();
			},
			//单选删
			delRow(showInfo){
				// this.$http.post("/tShowInfo/delShowInfo",{
				// 	showTitle: showInfo.row.showTitle
				// })
				// .then(resp => {
				// 	// if (resp.data.code == 200) 
				// 	this.loadData();
				// })	
			},
			//保存ID
			selects(sel){
				this.ids = [];
				for(let i = 0; i < sel.length; i ++) {
					this.id.ids.push(sel[i].noticeId);
				}
			},
			//多选删除
			delSelects() {
				this.$http.post("/notice/remove",this.ids).then(resp => {
					if (resp.data.code == 2000) {
						this.$message({
						  message: resp.data.message,
						  type: 'success'
						});
					}
					this.loadData();
				});
			},
			//展示
			up(rowData) {
				// this.upParam.showId = rowData.row.showId;
				// this.dialogIsVisible = true;
			},
			//隐藏
			down(rowData) {
			// 	console.log(rowData.row.showId)
			// 	this.$http.get("/tShowInfo/down/"+rowData.row.showId).then(resp => {
			// 		if(resp.data.code == 200){
			// 			this.$message({
			// 			  message: resp.data.msg,
			// 			  type: 'success'
			// 			});
			// 		}
			// 		this.loadData();
			// 	})
			},
			//添加弹出框关闭清空弹出框
			cleanAddNoticeInfo() {
				this.addNoticeParam = {}
			},
			//修改弹出框关闭清空弹出框
			cleanUpdateNoticeInfo() {
				this.updateNoticeParam = {}
			},
			//提交新增数据
			saveNewNoticeInfo() {
				this.$http.post("/notice/save",this.addNoticeParam)
				.then(resp => {
					if(resp.data.code == 2000){
						this.$message({
						  message: resp.data.message,
						  type: 'success'
						});
						this.noticeQueryParam.indexPage = 1;
						this.loadData();
					}
				})
				this.dialogVisible = false;
			},
			//修改
			update(rowData) {
				this.updateNoticeParam = rowData.row;
				this.dialogIsVisible = true;
			},
			//提交修改数据
			updateNoticeInfo() {
				this.$http.post("/notice/updateNotice",this.updateNoticeParam).then(resp => {
					if(resp.data.code == 2000){
						this.$message({
						  message: resp.data.message,
						  type: 'success'
						});
						this.updateNoticeParam = {};
						this.noticeQueryParam.indexPage = 1;
						this.loadData();
					}
					this.dialogIsVisible = false;
				})
			}
		},
		created() {
			this.loadData();
		}
	}
</script>

<style>
	.back{
		width: 100%;
		height: 100%;
		background-image: url(../img/repair-bg.png)
	}
	
</style>
